<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-07-24 19:07:52
 * @LastEditors: cxguo
 * @LastEditTime: 2020-07-29 14:10:44
-->
<template>
  <div>
    <el-upload
      ref="upload"
      drag
      :action="uploadUrl"
      multiple
      :auto-upload="false"
      :headers="headers"
      accept="xls"
      :on-progress="onUploadProgress"
      :on-success="onUploadSuccess"
      :on-error="onUploadError"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip">只能上传xls文件</div>
    </el-upload>
    <div class="margin-t10">
      <el-button type="primary" @click="btnUpload">开始导入</el-button>
    </div>
  </div>
</template>

<script>
import { uploadUrl } from '@/api/goods/goods.js'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      loading: null,
      uploadUrl,
      headers: { token: getToken() }
    }
  },
  methods: {
    btnUpload() {
      this.$refs.upload.submit()
    },
    onUploadProgress() {
      this.loading = this.$loading({ text: '导入中...' })
    },
    onUploadSuccess(res, file, fileList) {
      this.loading.close()
      if (res.flag) {
        this.$notify.success({ title: '导入成功！' })
        this.$refs.upload.clearFiles()
      } else {
        this.$notify.error({ title: '导入失败！', message: res.message })
      }
    },
    onUploadError(res, file, fileList) {
      this.$notify.error({ title: '导入失败！', message: res.message })
      this.loading.close()
    }
  }
}
</script>

<style>

</style>
